<template>
	<div>
		<div>  
	        <quill-editor v-model="content" 
	        	ref="myQuillEditor"  
	            @blur="onEditorBlur($event)"  
	            @focus="onEditorFocus($event)"  
	            @ready="onEditorReady($event)"  
	            @change="onEditorChange($event)">  
	        </quill-editor>  
            <Upload
                multiple
				style="display:none"
                ref="up"
                :show-upload-list="true"
                :on-success="handleSuccess"
                :format="['jpg','jpeg','png']"
                :max-size="4096"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                :before-upload="handleBeforeUpload"
                type="drag"
                name="avatar"
                action="http://localhost:3000/upload/imgfile">
                <input id="upload" />
                <div style="padding: 20px 0">
                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                    <p>点击或将文件拖拽到这里上传</p>
                </div>
            </Upload>
            <div>
		  		{{ content }}
		  	</div>
	  	</div>
	  	
	</div>
</template>

<script>
	export default {  
        data() {  
            return {  
                visible: false,  
                uploadList: [],  
                content: '<h2>I am Example</h2>',  
            }  
        },  
        // props:{  
        //     imgUrl:{  
        //         type:String,  
        //         default:'http://localhost:3000/upload/imgfile'  
        //     },  
        //     accept:{  
        //         type:Array  
        //     },  
        //     maxsize:{  
        //         type:Number,  
        //         default:20480  
        //     }  
        // },  
        computed: {  
            editor() {  
                return this.$refs.myQuillEditor.quill  
            },  
        },  
        mounted() {  
            // this.uploadList = this.$refs.up.fileList;  
            //给img video按键绑定事件  
            this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgClick
            )  
            this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('video', this.imgClick)  
        },  
  
        methods: {  
            //点击编辑器的图片触发事件  
            imgClick() {  
                alert(999);
                $('#upload').click()  
            },  
            //成功回调  
            handleSuccess(response, file, fileList) {  
                console.log("返回图片")  
                if(response.code == 500) {  
                    this.$Message.error('上传失败!')  
                } else {  
                    this.$Message.success('上传成功!')  
                }  
                console.log(response)  
                console.log(fileList)  
                console.log(file)  
                //图片上传成功后，将路径写入去
                var range = this.$refs.myQuillEditor.quill.getSelection();
				var length = range.index;
				this.$refs.myQuillEditor.quill.insertEmbed(length, 'image', '../../nodejs-data/uploads/'+response.filename);
            },  
            //报错的时候的警告
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件格式不正确',
                    desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
                });
            },
            handleBeforeUpload () {
                const check = this.uploadList.length < 5;
                if (!check) {
                    this.$Notice.warning({
                        title: '最多只能上传 5 张图片。'
                    });
                }
                return check;
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '超出文件大小限制',
                    desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
                });
            },
            //Quill  
            onEditorBlur(editor) {  
                console.log('editor blur!', editor)  
            },  
            onEditorFocus(editor) {  
                console.log('editor focus!', editor)  
            },  
            onEditorReady(editor) {  
                console.log('editor ready!', editor)  
            },  
            onEditorChange({editor,html,text}) {  
		        console.log('editor change!', editor, html, text)
		        this.content = html

            }  
        }  
    };  

</script>

<style lang="scss" scoped>
	 // .info {  
  //       border-radius: 10px;  
  //       line-height: 20px;  
  //       padding: 10px;  
  //       margin: 10px;  
  //       background-color: #ffffff;  
  //   } 
  //   .demo-upload-list {  
  //       display: inline-block;  
  //       width: 60px;  
  //       height: 60px;  
  //       text-align: center;  
  //       line-height: 60px;  
  //       border: 1px solid transparent;  
  //       border-radius: 4px;  
  //       overflow: hidden;  
  //       background: #fff;  
  //       position: relative;  
  //       box-shadow: 0 1px 1px rgba(0, 0, 0, .2);  
  //       margin-right: 4px;  
  //   }  
  
  //   .demo-upload-list img {  
  //       width: 100%;  
  //       height: 100%;  
  //   }  
  
  //   .demo-upload-list:hover .demo-upload-list-cover {  
  //       display: block;  
  //   }  
  
  //   .demo-upload-list-cover {  
  //       color: #fff;  
  //       font-size: 16px;  
  //       display: none;  
  //       position: absolute;  
  //       top: 0;  
  //       bottom: 0;  
  //       left: 0;  
  //       right: 0;  
  //       background: rgba(0, 0, 0, .6);  
  //   }   
</style>